<template>
  <div>
    <h2 v-if="firstView">请输入关键字进行搜索</h2>
    <h2 v-else-if="loading">请求加载中...</h2>
    <h2 v-else-if="errorMsg">{{errorMsg}}</h2>

    <div class="row" v-else>
      <div class="card" v-for="user in users" :key="user.username">
        <a :href="user.url" target="_blank">
          <img :src="user.avatar_url" style='width: 100px'/>
        </a>
        <p class="card-text">{{user.username}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Main',

  data () {
    return {
      firstView: true, // 是否显示第一个页面
      loading: false, // 是否正在请求加载中
      users: [], // 所有请求得到用户列表
      errorMsg: '', // 请求出错的提示信息
    }
  },

  created () {
    // 给全局事件总线绑定search事件监听
    this.$bus.$on('search', this.search)
  },

  methods: {
    search (searchName) {

      // 更新为请求中的状态
      this.firstView = false
      this.loading = true
      // 发送搜索的异步请求
      axios.get('https://api.github.com/search/users', {
        params: { // 配置query参数
          q: searchName
        }
      }).then(response => {
        // 请求成功, 更新为成功的状态
        this.loading = false
        const data = response.data
        const users = data.items.map(item => ({
          username: item.login,
          avatar_url: item.avatar_url,
          url: item.html_url
        }))
        this.users = users


      }).catch (error => {
        // 请求失败, 更新为失败的状态
        this.loading = false
        this.errorMsg = error.message
      })
        
        
    }
  }
}
</script>

<style scoped>
  .card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
  }

  .card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
  }

  .card-text {
    font-size: 85%;
  }
</style>
